<template>

    <div class="refund-approve-container">
  
      <!-- 搜索表单 -->
  
      <el-card class="search-card">
  
        <el-form :inline="true" :model="queryParams" class="search-form">
  
          <el-form-item label="订单号">
  
            <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
  
          </el-form-item>
  
          <el-form-item label="退款状态">
  
            <el-select v-model="queryParams.refundStatus" placeholder="全部" clearable>
  
              <el-option label="待审核" value="PENDING" />
  
              <el-option label="已通过" value="APPROVED" />
  
              <el-option label="已拒绝" value="REJECTED" />
  
            </el-select>
  
          </el-form-item>
  
          <el-form-item label="申请时间">
  
            <el-date-picker
  
              v-model="dateRange"
  
              type="daterange"
  
              range-separator="至"
  
              start-placeholder="开始日期"
  
              end-placeholder="结束日期"
  
              value-format="YYYY-MM-DD"
  
              @change="handleDateChange"
  
            />
  
          </el-form-item>
  
          <el-form-item>
  
            <el-button type="primary" @click="handleQuery">查询</el-button>
  
            <el-button @click="resetQuery">重置</el-button>
  
          </el-form-item>
  
        </el-form>
  
      </el-card>
  
  
  
      <!-- 数据表格 -->
  
      <el-card class="table-card">
  
        <el-table 
  
          v-loading="loading" 
  
          :data="refundList" 
  
          border
  
          style="width: 100%"
  
        >
  
          <el-table-column label="订单号" prop="orderNo" min-width="180" />
  
          <el-table-column label="退款金额" prop="refundAmount" min-width="120">
  
            <template #default="{ row }">
  
              ¥{{ row.refundAmount }}
  
            </template>
  
          </el-table-column>
  
          <el-table-column label="原支付金额" prop="totalAmount" min-width="120">
  
            <template #default="{ row }">
  
              ¥{{ row.totalAmount }}
  
            </template>
  
          </el-table-column>
  
          <el-table-column label="申请原因" prop="refundReason" min-width="200" show-overflow-tooltip />
  
          <el-table-column label="联系电话" prop="contactPhone" min-width="120" />
  
          <el-table-column label="申请时间" prop="updateTime" min-width="180" />
  
          <el-table-column label="退款状态" prop="refundStatus" min-width="100" align="center">
  
            <template #default="{ row }">
  
              <el-tag :type="getStatusType(row.refundStatus)">
  
                {{ getStatusLabel(row.refundStatus) }}
  
              </el-tag>
  
            </template>
  
          </el-table-column>
  
          <el-table-column label="操作" width="200" fixed="right" align="center">
  
            <template #default="{ row }">
  
              <template v-if="row.refundStatus === 'PENDING'">
  
                <el-button 
  
                  type="success" 
  
                  link 
  
                  @click="handleApprove(row, true)"
  
                >通过</el-button>
  
                <el-button 
  
                  type="danger" 
  
                  link 
  
                  @click="handleApprove(row, false)"
  
                >拒绝</el-button>
  
              </template>
  
              <el-button 
  
                type="primary" 
  
                link 
  
                @click="handleDetail(row)"
  
              >详情</el-button>
  
            </template>
  
          </el-table-column>
  
        </el-table>
  
  
  
        <!-- 分页组件 -->
  
        <div class="pagination-container">
  
          <el-pagination
  
            v-model:current-page="queryParams.pageNum"
  
            v-model:page-size="queryParams.pageSize"
  
            :total="total"
  
            :page-sizes="[10, 20, 30, 50]"
  
            layout="total, sizes, prev, pager, next, jumper"
  
            @size-change="handleSizeChange"
  
            @current-change="handleCurrentChange"
  
          />
  
        </div>
  
      </el-card>
  
  
  
      <!-- 审核备注弹窗 -->
  
      <el-dialog
  
        v-model="remarkVisible"
  
        :title="approveType ? '通过退款' : '拒绝退款'"
  
        width="500px"
  
      >
  
        <el-form :model="remarkForm" ref="remarkFormRef">
  
          <el-form-item 
  
            label="备注说明" 
  
            prop="remark"
  
            :rules="[{ required: true, message: '请输入备注说明', trigger: 'blur' }]"
  
          >
  
            <el-input
  
              v-model="remarkForm.remark"
  
              type="textarea"
  
              :rows="3"
  
              :placeholder="approveType ? '请输入通过说明' : '请输入拒绝原因'"
  
            />
  
          </el-form-item>
  
        </el-form>
  
        <template #footer>
  
          <el-button @click="remarkVisible = false">取 消</el-button>
  
          <el-button type="primary" @click="submitApprove" :loading="submitting">
  
            确 定
  
          </el-button>
  
        </template>
  
      </el-dialog>
  
  
  
      <!-- 详情弹窗 -->
  
      <el-dialog
  
        v-model="detailVisible"
  
        title="退款详情"
  
        width="600px"
  
      >
  
        <el-descriptions :column="2" border>
  
          <el-descriptions-item label="订单号">{{ currentRow.orderNo }}</el-descriptions-item>
  
          <el-descriptions-item label="退款金额">¥{{ currentRow.refundAmount }}</el-descriptions-item>
  
          <el-descriptions-item label="原支付金额">¥{{ currentRow.totalAmount }}</el-descriptions-item>
  
          <el-descriptions-item label="退款状态">
  
            <el-tag :type="getStatusType(currentRow.refundStatus)">
  
              {{ getStatusLabel(currentRow.refundStatus) }}
  
            </el-tag>
  
          </el-descriptions-item>
  
          <el-descriptions-item label="联系电话">{{ currentRow.contactPhone }}</el-descriptions-item>
  
          <el-descriptions-item label="申请时间">{{ currentRow.updateTime }}</el-descriptions-item>
  
          <el-descriptions-item label="退款原因" :span="2">{{ currentRow.refundReason }}</el-descriptions-item>
  
          <el-descriptions-item v-if="currentRow.remark" label="审核备注" :span="2">
  
            {{ currentRow.remark }}
  
          </el-descriptions-item>
  
        </el-descriptions>
  
      </el-dialog>
  
    </div>
  
  </template>
  
  
  
  <script setup lang="ts">
  
  import { ref, onMounted } from 'vue'
  
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  import { getPaymentList, approveRefund } from '@/api/payment'
  
  import type { PaymentQuery, PaymentRecord } from '@/types/payment'
  
  
  
  const loading = ref(false)
  
  const submitting = ref(false)
  
  const total = ref(0)
  
  const refundList = ref<PaymentRecord[]>([])
  
  const remarkVisible = ref(false)
  
  const detailVisible = ref(false)
  
  const approveType = ref(true)
  
  const currentRow = ref<PaymentRecord>({} as PaymentRecord)
  
  
  
  // 查询参数
  
  const queryParams = ref<PaymentQuery>({
  
    pageNum: 1,
  
    pageSize: 10,
  
    orderNo: '',
  
    refundStatus: undefined,
  
    startDate: '',
  
    endDate: ''
  
  })
  
  
  
  // 日期范围
  
  const dateRange = ref<[string, string]>(['', ''])
  
  
  
  // 备注表单
  
  const remarkForm = ref({
  
    remark: ''
  
  })
  
  const remarkFormRef = ref()
  
  
  
  // 获取退款列表
  
  const getList = async () => {
  
    loading.value = true
  
    try {
  
      const res = await getPaymentList(queryParams.value)
  
      refundList.value = res.data.records
  
      total.value = res.data.total
  
    } catch (error) {
  
      console.error('获取退款列表失败:', error)
  
      ElMessage.error('获取退款列表失败')
  
    } finally {
  
      loading.value = false
  
    }
  
  }
  
  
  
  // 处理审核
  
  const handleApprove = (row: PaymentRecord, isApprove: boolean) => {
  
    currentRow.value = row
  
    approveType.value = isApprove
  
    remarkForm.value.remark = ''
  
    remarkVisible.value = true
  
  }
  
  
  
  // 提交审核
  
  const submitApprove = async () => {
  
    if (!remarkFormRef.value) return
  
    
  
    await remarkFormRef.value.validate(async (valid: boolean) => {
  
      if (!valid) return
  
      
  
      try {
  
        submitting.value = true
  
        await approveRefund({
  
          orderNo: currentRow.value.orderNo,
  
          approved: approveType.value,
  
          remark: remarkForm.value.remark
  
        })
  
        
  
        ElMessage.success(approveType.value ? '退款已通过' : '退款已拒绝')
  
        remarkVisible.value = false
  
        getList()
  
      } catch (error) {
  
        console.error('处理退款申请失败:', error)
  
        ElMessage.error('处理退款申请失败')
  
      } finally {
  
        submitting.value = false
  
      }
  
    })
  
  }
  
  
  
  // 查看详情
  
  const handleDetail = (row: PaymentRecord) => {
  
    currentRow.value = row
  
    detailVisible.value = true
  
  }
  
  
  
  // 获取状态样式
  
  const getStatusType = (status: string | undefined): string => {
  
    if (!status) return 'info'
  
    
  
    const typeMap: Record<string, string> = {
  
      'PENDING': 'warning',
  
      'APPROVED': 'success',
  
      'REJECTED': 'danger'
  
    }
  
    return typeMap[status] || ''
  
  }
  
  
  
  // 获取状态文本
  
  const getStatusLabel = (status: string | undefined): string => {
  
    if (!status) return '未申请'
  
    
  
    const labelMap: Record<string, string> = {
  
      'PENDING': '待审核',
  
      'APPROVED': '已通过',
  
      'REJECTED': '已拒绝'
  
    }
  
    return labelMap[status] || status
  
  }
  
  
  
  // 查询和重置
  
  const handleQuery = () => {
  
    queryParams.value.pageNum = 1
  
    getList()
  
  }
  
  
  
  const resetQuery = () => {
  
    queryParams.value = {
  
      pageNum: 1,
  
      pageSize: 10,
  
      orderNo: '',
  
      refundStatus: undefined,
  
      startDate: '',
  
      endDate: ''
  
    }
  
    dateRange.value = ['', '']
  
    getList()
  
  }
  
  
  
  // 分页方法
  
  const handleSizeChange = (val: number) => {
  
    queryParams.value.pageSize = val
  
    getList()
  
  }
  
  
  
  const handleCurrentChange = (val: number) => {
  
    queryParams.value.pageNum = val
  
    getList()
  
  }
  
  
  
  // 日期范围变化
  
  const handleDateChange = (val: [string, string]) => {
  
    if (val) {
  
      queryParams.value.startDate = val[0]
  
      queryParams.value.endDate = val[1]
  
    } else {
  
      queryParams.value.startDate = ''
  
      queryParams.value.endDate = ''
  
    }
  
  }
  
  
  
  onMounted(() => {
  
    getList()
  
  })
  
  </script>
  
  
  
  <style lang="scss" scoped>
  
  .refund-approve-container {
  
    padding: 20px;
  
    
  
    .search-card {
  
      margin-bottom: 20px;
  
      
  
      .search-form {
  
        display: flex;
  
        flex-wrap: wrap;
  
        gap: 10px;
  
      }
  
    }
  
    
  
    .table-card {
  
      .pagination-container {
  
        margin-top: 20px;
  
        padding: 10px 0;
  
        text-align: right;
  
      }
  
    }
  
    
  
    :deep(.el-descriptions) {
  
      margin-bottom: 20px;
  
    }
  
  }
  
  </style> 